import React from 'react'
import './countDown.scss'

export default class CountDown extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			day: 0,
			hour: 0,
			minute: 0,
			second: 0
		}
	}

	componentDidMount() {
		this.showtime()
	}

	showtime = () => {
		const changeTimeFunc = () => {
			let nowtime = new Date(), //获取当前时间
				endtime = new Date('2021/12/25') //定义结束时间
			let lefttime = endtime.getTime() - nowtime.getTime() //距离结束时间的毫秒数
			let day = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
				hour = Math.floor((lefttime / (1000 * 60 * 60)) % 24), //计算小时数
				minute = Math.floor((lefttime / (1000 * 60)) % 60), //计算分钟数
				second = Math.floor((lefttime / 1000) % 60) //计算秒数
			this.setState({
				day: day > 9 ? day : `0${day}`, //计算天数
				hour: hour > 9 ? hour : `0${hour}`, //计算小时数
				minute: minute > 9 ? minute : `0${minute}`, //计算分钟数
				second: second > 9 ? second : `0${second}` //计算秒数
			})
		}
		changeTimeFunc()
		setInterval(changeTimeFunc, 1000)
	}

	render() {
		const { day, hour, minute, second } = this.state
		return (
			<div className="CountDown">
				<div className="countName">考研倒计时</div>
				<div className="showPart">
					<div className="show countNumber">{day}</div>
					<div className="show countText">天</div>
					<div className="show countNumber">{hour}</div>
					<div className="show countText">时</div>
					<div className="show countNumber">{minute}</div>
					<div className="show countText">分</div>
					<div className="show countNumber">{second}</div>
					<div className="show countText">秒</div>
				</div>
			</div>
		)
	}
}
